<template>
  <el-dropdown
    trigger="hover"
    @command="changeLanguage"
  >
    <div>
      <!-- 图标组件 -->
      <svg-icon
        style="color: #fff; font-size: 20px"
        icon-class="language"
      />
    </div>
    <!-- 下拉菜单 -->
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        command="zh"
        :disabled="'zh' === $i18n.locale"
      >
        中文
      </el-dropdown-item>
      <el-dropdown-item
        command="en"
        :disabled="'en' === $i18n.locale"
      >
        en
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
// 导入 cookie 插件
import ck from 'js-cookie'
export default {
  name: 'Lang',
  methods: {
    // lang 是对应菜单command绑定的值
    changeLanguage (lang) {
      console.log(this.$i18n)
      // 使用国际化插件实例：$i18n动态修改locale的值
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')

      // 存储语言状态
      ck.set('lang', lang)
    },
    // 学习 js-cookie 设置过期时间
    setExpire () {
      /**
       * 1.默认过期时间是 session 会话形式，浏览器关闭就没有了
       * 2.设置过期事件，第三个参数传入： { expires：2}
       * 如果过期时间想要小时，可以设置日期对象传入
       * const time = new Date(Date.now() + 2 * 60 * 60 * 1000) // 2小时后过期
       * ck.set('name', 'value', { expires:time })
       */
      ck.set('text141', 123, { expires: 2 })
    }
  }
}
</script>
